<template>
  <el-form
    class="mb-10px mt-20px flex"
    @submit.prevent
    :model="formOption"
    ref="formRef"
    :inline="true"
    label-width="90px"
  >
    <el-row>
      <el-col :span="6">
        <el-form-item label="文件名称:" prop="fileName">
          <ns-input
            v-model="formOption.fileName"
            placeholder="请输入查询的文件名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="文件类型:" prop="fileType">
          <ns-input
            v-model="formOption.fileType"
            placeholder="请输入查询的文件类型"
            clearable
            style="width: 200px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="文件哈希:" prop="figureType">
              <el-select
                placeholder="请选择指纹类型"
                v-model="formOption.figureType"
                style="width: 200px"
              >
                <el-option
                  v-for="item in figureTypes"
                  :label="item.name"
                  :value="item.name"
                  :key="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="" prop="figureValue">
              <ns-input
                v-model="formOption.figureValue"
                placeholder="请输入查询的文件哈希"
                clearable
                style="width: 150px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-form-item label="分类:" prop="classification">
          <el-cascader
            v-model="formOption.classification"
            placeholder="请选择分类"
            :props="classificationCascaderProps"
            :options="classificationList"
            filterable
            style="width: 200px"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="分级:" prop="level">
          <el-select
            v-model="formOption.level"
            clearable
            placeholder="请选择分级"
            style="width: 200px"
          >
            <el-option
              v-for="(level, levelIndex) in levelList"
              :key="levelIndex"
              :label="level.levelName"
              :value="level.levelCode"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="flex-1"></div>
    <el-form-item class="min-w-150px">
      <el-button type="primary" @click="query">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </el-form-item>
  </el-form>
  <div>
    <AsyncTable
      ref="tableRef"
      class="risk-type-table"
      :max-height="500"
      :columns="tableOption"
      :fetchData="fetchData"
    />
  </div>
</template>
<script setup lang="jsx">
import { getFsList } from '@/api/asset/taskManage/database'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { renderFinger, renderLevel } from '@/utils/commonRender'
import { getFingerType } from '@/api/develop/featureLibrary/fingerprint'
import { dataClassificationTree } from '@/api/dataStandards/classification/index'
import { levelPage } from '@/api/strategyManage/level/index'

const { proxy } = getCurrentInstance()
const route = useRoute()

const props = defineProps({
  historyId: {
    type: String,
    default: ''
  },
  collectionAssetId: {
    type: String,
    default: ''
  }
})
const tableRef = ref(null)
const formOption = reactive({
  fileName: '',
  fileType: '',
  figureType: '',
  figureValue: ''
})

const classificationCascaderProps = ref({
  checkStrictly: true,
  label: 'text',
  value: 'text',
  children: 'children',
  emitPath: false
})

const tableOption = reactive([
  {
    prop: 'fileName',
    label: '文件名称',
    'min-width': 120,
    'show-overflow-tooltip': true
  },
  {
    prop: 'fileType',
    label: '文件类型',
    'min-width': 90
  },
  {
    label: '文件大小',
    'min-width': 90,
    prop: 'fileSize'
  },
  {
    prop: 'absolutePath',
    label: '文件路径',
    'min-width': 160,
    'show-overflow-tooltip': true
  },
  {
    label: '文件哈希',
    'min-width': 160,
    'show-overflow-tooltip': true,
    render: renderFinger
  },
  {
    label: '分类',
    prop: 'classification'
  },
  {
    label: '分级',
    render: renderLevel
  },
  { label: '', width: '60px' }
])
watch(
  () => props.historyId,
  () => {
    query()
  }
)

const levelList = ref([])
const getLevelList = async () => {
  const { data } = await levelPage({ page: 1, pageSize: 999 })
  console.log('data', data)
  levelList.value = data
}

function traverseTree(data) {
  const updatedTree = []
  for (let i = 0; i < data.length; i++) {
    const node = data[i] // 创建新节点并添加 disable 属性
    if (node.pid == '-1') {
      node.disabled = true
    }
    updatedTree.push(node)
    if (node.children && node.children.length > 0) {
      node.children = traverseTree(node.children) // 递归遍历子节点并更新子树结构
    }
  }
  return updatedTree
}

const classificationList = ref([])
const getClassificationList = async () => {
  const data = await dataClassificationTree({ type: '0' })
  classificationList.value = traverseTree(data)
}

/**
 * 单位转换，基础单位bytes
 */
function formatB(size) {
  const num = Number(size)
  if (num >= 1024 * 1024 * 1024) {
    return (num / (1024 * 1024 * 1024)).toFixed(1) + 'GB'
  } else if (num >= 1024 * 1024) {
    return (num / (1024 * 1024)).toFixed(1) + 'MB'
  } else if (num >= 1024) {
    return (num / 1024).toFixed(1) + 'KB'
  } else {
    return num + 'B'
  }
}
async function fetchData({ page, pageSize }) {
  const res = await getFsList({
    ...formOption,
    pageSize,
    page,
    collectionAssetId: route.query.collectionAssetId || props.collectionAssetId,
    historyId: props.historyId
  })
  return {
    data: res.data,
    count: res.count
  }
}

// 所有指纹类型
const figureTypes = ref([])
/** 获取指纹类型 */
const getTypes = async () => {
  const res = await getFingerType()
  figureTypes.value = Object.entries(res).map(([key, value]) => {
    return {
      name: value,
      value: key
    }
  })
}
const resetSearch = () => {
  proxy.$refs.formRef.resetFields()
  query()
}
const query = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}

onMounted(() => {
  getTypes()
  getClassificationList()
  getLevelList()
})
</script>
<style lang="scss">
.terminal-result-wrap {
  label:not(.font-bold) {
    font-weight: normal;
  }
}
</style>
